Интерфейсы и типы в TypeScript: разбираемся на примерах

Типы и интерфейсы. Часть 1

Начинаем погружение! Путь предстоит долгий, поэтому нужно хорошенько подготовиться и вспомнить основы. Давайте на берегу вспомним как определяются интерфейсы и типы, в чем отличие и как все это дело связано.

Интерфейсы описывают объекты. Выглядит это следующим образом:

typescript

interface AInt {
  first: boolean;
  second: number;
}

Здесь мы определили интерфейс с именем AInt и двумя полями: first и second. Надеюсь на этом этапе все понятно.

Такую же структуру объекта мы можем описать и с помощью типа:

typescript

type AType = {
  first: boolean;
  second: number;
}

Обратите внимание, здесь мы использовали ключевое слово type, и после названия добавили знак «=». Это первое отличие в синтаксисе. Но в остальном отличий нет.

Теперь мы можем создать объекты, которые будут соответствовать нашим AInt и AType:

typescript

const aInt: AInt = {
  first: true,
  second: 10,
}

typescript
const aType: AType = {
  first: false,
  second: 42,
}

Как видите, разницы никакой. Более того, мы можем сделать функцию, которая принимает аргументы с типом AInt и подсунуть туда aType, код отработает без ошибок:

typescript

function useInterface(param: AInt): void {
  console.log(param);
}

typescript
useInterface(aInt); // ошибки нет
useInterface(aType); // и здесь ошибки нет тоже

TypeScript использует механизм структурной типизации — cовместимость типов определяется на основе их структуры. Проще говоря: «выглядит как утка, крякает как утка, значит это утка», прямо как в JS. А вот в языках типа C# или Java такое не прокатит, потому что в них используется более строгая типизация — номинативная.

Напишите в комментариях, что было понятно, а что нет. Я все еще совершенствую навык объяснять сложные вещи простыми словами, поэтому буду благодарен, если подскажете, где можно написать понятнее и проще.

© Записки тимлида